<template>
	<div class="custom-banner" :style="{ height }">
		<div class="swiper" :class="className">
			<div class="swiper-wrapper">
				<div class="swiper-slide" v-for="(item, i) in list" :key="i" @click="openItem(item)">
					<el-image style="width: 100%; height: 100%" :src="item.image || item.url"></el-image>
				</div>
			</div>
			<template v-if="button">
				<div class="swiper-button-next" :class="`swiper-button-next-${className}`"></div>
				<div class="swiper-button-prev" :class="`swiper-button-prev-${className}`"></div>
			</template>
			<div v-if="paging" class="swiper-pagination" :class="`swiper-pagination-${className}`"></div>
		</div>
	</div>
</template>

<script>
export default {
	components: {},
	props: {
		id: {
			type: String,
			default: function () {
				return 'Banner-' + +new Date() + ((Math.random() * 1000).toFixed(0) + '');
			}
		},
		list: {
			type: Array | Number,
			default: () => {
				return [];
			}
		},
		height: {
			type: String | Number,
			default: '100%'
		},
		button: {
			type: Boolean,
			default: false
		},
		paging: {
			type: Boolean,
			default: false
		},
		showTitle: {
			type: Boolean,
			default: false
		}
	},
	name: 'banner',
	computed: {},
	watch: {
		list: {
			handler() {
				if (this.list.length) {
					this.$nextTick(() => {
						this.initSwiper();
					});
				}
			},
			immediate: true
		}
	},
	data() {
		return {
			className: this.id
		};
	},
	created() {},
	mounted() {},
	methods: {
		openItem(item) {
			return;
			if (item.url) {
				window.open(item.url);
			} else if (item.target) {
				window.open(item.target);
			}
		},
		initSwiper() {
			let className = this.className;
			new this.$Swiper(`.${className}`, {
				spaceBetween: 0,
				centeredSlides: true,
				preventClicks: true, //默认true
				// loop: true,
				autoplay: {
					delay: 3000,
					disableOnInteraction: false
				},
				pagination: {
					el: `.swiper-pagination-${className}`,
					clickable: true
				},
				navigation: {
					nextEl: `.swiper-button-next-${className}`,
					prevEl: `.swiper-button-prev-${className}`,
					disabledClass: 'my-button-disabled'
				},
				on: {}
			});
		}
	}
};
</script>

<style lang="less" scoped>
.custom-banner {
	position: relative;
	.swiper-pagination {
		bottom: 20px;
		/deep/.swiper-pagination-bullet {
			width: 70px;
			height: 4px;
			background: rgba(255, 255, 255, 0.7) !important;
			opacity: 1 !important;
			border-radius: 0px 0px 0px 0px;
		}
		/deep/.swiper-pagination-bullet-active {
			background: rgba(@themeRGBA, 1) !important;
		}
	}
	&:hover {
		.swiper-button-next {
			right: 30px !important;
		}
		.swiper-button-prev {
			left: 30px !important;
		}
	}
	.my-button-disabled {
		opacity: 0.4;
		&::after {
			color: #ccc !important;
		}
	}
	.swiper-button-next {
		background: rgba(0, 0, 0, 0.5);
		width: 40px;
		height: 40px;
		border-radius: 50%;
		right: -60px !important;
		.jhover3();
		&::after {
			color: @theme;
			color: white;
			font-size: 12px;
		}
	}
	.swiper-button-prev {
		background: rgba(0, 0, 0, 0.5);
		width: 40px;
		height: 40px;
		border-radius: 50%;
		left: -60px !important;
		.jhover3();
		&::after {
			color: white;
			font-size: 12px;
		}
	}

	.mySwiper-banner {
		.fix-c-x();
		width: 100% !important;
		height: 100%;
	}
	.swiper-slide-thumb-active {
		opacity: 1;
		border: 2px solid @theme;
		box-shadow: 0 0px 5px 0 rgba(35, 68, 152, 1);
	}
	.swiper {
		width: 100%;
		height: 100%;
		img {
			background: #eee;
		}
	}

	.swiper-slide {
		position: relative;
		width: 100%;
		height: 100%;
		/deep/img {
			display: block;
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
	}
}
</style>
